<template>
	<view class="scroll-table-container">
		<!-- 表头 -->
		<view class="table-header">
			<view class="header-cell" v-for="(item, index) in columns" :key="index" :style="{ width: item.width || 'auto' }">
				{{ item.title }}
			</view>
		</view>

		<!-- 表格内容区域 -->
		<scroll-view class="table-body" scroll-y :scroll-top="scrollTop" scroll-with-animation
			:animation-duration="animationDuration" :style="{ height: bodyHeight }">
			<view class="table-row" v-for="(row, rowIndex) in data" :key="rowIndex">
				<view class="table-cell" v-for="(col, colIndex) in columns" :key="colIndex"
					:style="{ width: col.width || 'auto', color: col.color || '#000' }">
					{{ row[col.key] }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'ScrollTable',
		props: {
			// 列配置
			columns: {
				type: Array,
				default: () => []
			},
			// 表格数据
			data: {
				type: Array,
				default: () => []
			},
			// 滚动间隔时间(毫秒)
			interval: {
				type: Number,
				default: 2000
			},
			// 每行高度(rpx)
			rowHeight: {
				type: Number,
				default: 44
			},
			// 可见行数
			visibleRows: {
				type: Number,
				default: 5
			},
			// 滚动动画持续时间(ms)
			animationDuration: {
				type: Number,
				default: 500
			}
		},
		data() {
			return {
				scrollTop: 0, // 当前滚动位置
				currentRow: 0, // 当前显示的行索引
				timer: null, // 定时器
				isScrolling: false // 是否正在滚动中
			}
		},
		computed: {
			// 计算表格内容区域高度
			bodyHeight() {
				return this.rowHeight * this.visibleRows + 'px'
			}
		},
		mounted() {
			if (this.data.length > 3) {
				this.startScroll()
			}
		},
		beforeDestroy() {
			this.stopScroll()
		},
		methods: {
			// 开始滚动
			startScroll() {
				if (this.data.length <= 1) return // 数据不足一行时不滚动

				this.stopScroll() // 先停止之前的定时器

				this.timer = setInterval(() => {
					if (this.isScrolling) return // 如果正在滚动中则跳过

					this.isScrolling = true

					// 计算下一行位置
					const nextRow = this.currentRow + 1

					if (nextRow >= this.data.length) {
						// 到达最后一行后直接回到顶部
						this.currentRow = 0
						this.scrollTop = 0
					} else {
						// 正常滚动到下一行
						this.currentRow = nextRow
						this.scrollTop = this.currentRow * this.rowHeight
					}

					// 动画结束后重置滚动状态
					setTimeout(() => {
						this.isScrolling = false
					}, this.animationDuration)
				}, this.interval)
			},
			// 停止滚动
			stopScroll() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
				this.isScrolling = false
			}
		},
		watch: {
			// 数据变化时重新开始滚动
			data() {
				this.currentRow = 0
				this.scrollTop = 0
				if (this.data.length > 3) {
					this.startScroll()
				}
			}
		}
	}
</script>

<style scoped>
	.scroll-table-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		/* border: 1px solid #e8e8e8; */
		border-radius: 8rpx;
		overflow: hidden;
	}

	.table-header {
		display: flex;
		/* background-color: #f5f5f5; */
		/* border-bottom: 1px solid #e8e8e8; */
	}

	.header-cell {
		font-size: 20rpx;
		padding: 16rpx 0;
		text-align: center;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.table-body {
		flex: 1;
		overflow: hidden;
		background-color: #f0f0f0;
	}

	.table-row {
		display: flex;
		border-bottom: 1px solid #f0f0f0;
	}

	.table-row:nth-child(odd) {
		background-color: #EAEEFD;
		/* 设置背景颜色 */
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-cell {
		font-size: 26rpx;
		font-weight: bold;
		text-align: center;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 43px;
		line-height: 43px;
	}
</style>